<script setup lang="ts">

import {ref} from "vue";
import type {Permission} from "@/net/controller/rbac-controller.ts";
import {
  bindLevelPermissions,
  getAllLevelPermissions,
  Level,
  unbindLevelPermissions
} from "@/net/controller/level-permission-controller.ts";
import {bindRolePermissions, getAllPermissions, Role, unbindRolePermissions} from "@/net/controller/rbac-controller.ts";
import {showSimpleDialog} from "@/utils/dialog-utils.ts";

const data = ref<{[_: string]: { level: Level, permissions: Permission[]}}>({})
async function refreshData() {
  data.value = await getAllLevelPermissions()
}

refreshData()

const showRolePermissionBindingDialog = ref(false)
const rolePermissionBindingDialogData = ref<{levelId: number, permissionId: number}>({ levelId: 0, permissionId: 0 })

/**
 * 权限列表
 */
const permissions = ref<Permission[]>([])

async function refreshPermissions() {
  permissions.value = await getAllPermissions()
}

refreshPermissions()

function openLevelPermissionBindingDialog(level: Level) {
  console.log(level)
  showRolePermissionBindingDialog.value = true
  rolePermissionBindingDialogData.value = {
    levelId: level.levelId,
    permissionId: 0
  }
}

function onLevelPermissionBindConfirm() {
  bindLevelPermissions(rolePermissionBindingDialogData.value.levelId, rolePermissionBindingDialogData.value.permissionId).then(() => {
    ElMessage.success("添加成功")
  }).finally(() => {
    showRolePermissionBindingDialog.value = false
    refreshData()
  })
}

function onUnbindLevelPermission(level: Level, permission: Permission) {
  showSimpleDialog(`解绑权限 ${permission.name}`, `是否要将权限 ${permission.name} 从等级 ${level.levelName} 中移除?`, () => {
    unbindLevelPermissions(level.levelId, permission.permissionId).then(() => {
      ElMessage.success("删除成功")
      refreshData()
    })
  })
}

</script>

<template>
  <main>
    <div>
      <el-button size="default" type="info" @click="refreshData()">刷新</el-button>
    </div>

    <el-table :data="Object.keys(data).map(e => data[e])" style="width: 100%; margin-top: 1rem">
      <!-- 角色权限表格 -->
      <el-table-column type="expand">
        <template #default="scope">
          <div class="flex flex-vertical" style="padding: 1rem">
            <div class="flex flex-horizontal">
              <el-button size="small" type="primary" @click="openLevelPermissionBindingDialog(scope.row.level)">添加</el-button>
            </div>

            <el-table style="margin-top: 1rem" :data="scope.row.permissions">
              <el-table-column label="权限ID" prop="permissionId" />
              <el-table-column label="权限名称" prop="name" />
              <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="props">
                  <el-button link type="danger" size="small" @click="onUnbindLevelPermission(scope.row.level, props.row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="等级 ID">
        <template #default="scope">
          {{ scope.row.level.levelId }}
        </template>
      </el-table-column>
      <el-table-column label="等级名称">
        <template #default="scope">
          {{ scope.row.level.levelName }}
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="showRolePermissionBindingDialog" title="绑定权限" width="450">
      <el-select
          v-model="rolePermissionBindingDialogData.permissionId"
          placeholder="Select"
          size="large"
          style="width: 240px"
      >
        <el-option
            v-for="item in permissions"
            :key="item.name"
            :label="item.name"
            :value="item.permissionId"
        />
      </el-select>

      <template #footer>
        <div>
          <el-button size="default" @click="showRolePermissionBindingDialog = false">取消</el-button>
          <el-button size="default" type="primary" @click="onLevelPermissionBindConfirm()">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </main>
</template>

<style scoped>

</style>